<!-- 资源管理 -->
<template>
  <div class="zy_cnter">
    <!-- <el-breadcrumb class="title">
      <el-breadcrumb-item>资源管理</el-breadcrumb-item>
    </el-breadcrumb> -->
    <div class="zy">
      <div class="search">
        <el-input placeholder="资源名称" v-model="name" clearable> </el-input>
      </div>
      <div class="btn">
        <el-button type="primary" @click="search()">查询</el-button>
        <el-button @click="reset()">重置</el-button>
      </div>
    </div>
    <div class="export" v-if="false">
      <el-button class="new-built" type="primary" @click="inducts()">
        新建资源
      </el-button>
    </div>
    <div class="QMtb">
      <el-table
        :data="tableData"
        border
        style="width: 100%; height: 600"
        :header-cell-style="{
          background: '#f0f7fe',
          color: '#467ee1',
          fontSize: '16px',
        }"
      >
        <el-table-column label="序号" align="center" min-width="10%">
          <template slot-scope="{ $index }">
            {{ startIndex + $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="resourceName"
          label="资源名称"
          min-width="10%"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="icon"
          label="图标"
          min-width="10%"
          align="center"
        >
          <template v-slot:default="scope">
            <el-image
              :src="scope.row.icon"
              style="width: 50px; height: 50px; cursor: pointer"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="resourceUrl"
          label="访问路径"
          min-width="15%"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="component"
          label="资源路径"
          min-width="15%"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          min-width="10%"
          align="center"
        >
          <template slot-scope="scope">
            <el-switch
              :disabled="scope.row.pid == 6"
              v-model="scope.row.status"
              @change="RoChang(scope.row)"
              :active-value="0"
              :inactive-value="1"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          min-width="20%"
          :formatter="formatDate"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" min-width="15%" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" size="mini"
              >修改</el-button
            >
            <el-button
              v-if="scope.row.pid != 6"
              @click="handleDelete(scope.row)"
              type="danger"
              size="mini"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalItems"
      >
      </el-pagination>

      <!-- 修改 -->
      <el-dialog
        title="修改资源"
        :visible.sync="dialogTableVisible"
        @close="updaeqK()"
        customClass="customWidth"
      >
        <el-form
          :model="Forms"
          :rules="rules"
          ref="rForms"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="资源名称" prop="resourceName">
            <el-input
              v-model="Forms.resourceName"
              placeholder="请输入资源名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="访问路径" prop="resourceUrl">
            <el-input
              v-model="Forms.resourceUrl"
              disabled
              placeholder="请输入访问路径"
            ></el-input>
          </el-form-item>
          <el-form-item label="资源路径" prop="component">
            <el-input
              v-model="Forms.component"
              placeholder="请输入资源路径"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-upload
              action="#"
              accept="image/jpeg,image/jpg,image/png"
              multiple
              list-type="picture-card"
              :limit="limit"
              :on-remove="updaRemove"
              :on-change="updaEditChange"
              ref="uploads"
              :class="{ hide: hideUpload }"
              :http-request="uploadHttpRequest"
              :file-list="fileList"
              :on-preview="handlePictureCardPreview"
              :before-upload="beforeAvatarUpload"
            >
              <!-- <i class="el-icon-plus"></i> -->
              <i class="el-icon-upload"></i>
            </el-upload>
            <el-dialog :visible.sync="bigImgVisible" :append-to-body="true">
              <img style="width: 100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item label="是否启用" prop="status" v-if="Forms.pid != 6">
            <el-switch
              v-model="Forms.status"
              :active-value="0"
              :inactive-value="1"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="UpdaQuTerx()">取 消</el-button>
          <el-button type="primary" @click="update()">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 新增资源 -->
      <el-dialog
        title="新增资源"
        customClass="customWidth"
        :visible.sync="dialogVisible"
        width="35%"
        :before-close="handleClose"
        @close="handleqK()"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForms"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="资源名称" prop="resourceName">
            <el-input
              v-model="ruleForm.resourceName"
              placeholder="请输入资源名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="访问路径" prop="resourceUrl">
            <el-input
              v-model="ruleForm.resourceUrl"
              placeholder="请输入访问路径"
            ></el-input>
          </el-form-item>
          <el-form-item label="资源路径" prop="component">
            <el-input
              v-model="ruleForm.component"
              placeholder="请输入资源路径"
            ></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-upload
              action="#"
              accept="image/jpeg,image/jpg,image/png"
              multiple
              list-type="picture-card"
              :limit="1"
              :on-remove="handleRemove"
              :on-change="handleEditChange"
              :class="{ hide: hideUploadEdit }"
              :http-request="uploadHttpRequest"
              ref="upload"
              :on-preview="handlePictureCardPreview"
              :before-upload="beforeAvatarUpload"
            >
              <!-- <i class="el-icon-plus"></i> -->
              <i class="el-icon-upload"></i>
            </el-upload>
            <el-dialog :visible.sync="bigImgVisible" :append-to-body="true">
              <img style="width: 100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item label="是否启用" prop="status">
            <el-switch
              v-model="ruleForm.status"
              :active-value="0"
              :inactive-value="1"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="QuTerx('ruleForms')">取 消</el-button>
          <el-button
            type="primary"
            @click="download()"
            v-loading.fullscreen.lock="fullscreenLoading"
            >确定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  getresources,
  delresources,
  InseResources,
  UpdateResources,
  StatusSwitch,
} from "@/api/Resources";
import { formatDate } from "@/utls/format";
export default {
  data() {
    return {
      formatDate, //格式化时间
      //新增
      ruleForm: {
        resourceName: "",
        resourceUrl: "",
        status: 0,
        icon: null,
        component: "",
      },
      fileList: [{ url: "" }],
      Forms: {
        id: 1,
        resourceName: "",
        resourceUrl: "",
        status: 0,
        icon: null,
        component: "",
        pid: 0,
      }, //修改
      bigImgVisible: false,
      limit: 1,
      // 添加的图片地址
      hideUploadEdit: false, //隐藏图标
      hideUpload: false,
      dialogImageUrl: "", //预览图片的地址
      bigImgVisible: false,
      hideUploadEdit: false, //隐藏图标
      dialogImageUrl: null, //预览图片的地址
      dialogVisible: false,
      dialogTableVisible: false, //修改控制
      // formLabelWidth: "120px",
      a_name: "", //
      templateSelection: false,
      displayedData: [], // 当前页显示的数据
      currentPage: 1, // 当前页面
      pageSize: 10, // 每页显示的数据条数
      totalItems: 0, // 总数据条数
      startIndex: 0, //当前页数据的起始索引
      tableData: [], //表格数据
      name: "", //资源名称
      fullscreenLoading: false,
      //校验
      rules: {
        component: [
          { required: true, message: "请输入资源路径", trigger: "blur" },
        ],
        resourceName: [
          { required: true, message: "请输入资源名称", trigger: "blur" },
        ],
        resourceUrl: [
          { required: true, message: "请输入访问路径", trigger: "blur" },
        ],
        icon: [{ required: true, message: "请选择图片", trigger: "change" }],
      },
    };
  },
  methods: {
    uploadHttpRequest() {},
    //图片改变
    handleEditChange(file, fileList) {
      this.hideUploadEdit = fileList.length >= 1;
      // var formData = new FormData();
      // formData.append("file", file.raw);
      this.ruleForm.icon = file.raw;
    },
    //修改图片
    updaEditChange(file, fileList) {
      this.hideUpload = fileList.length >= 1;
      this.Forms.icon = file.raw;
      // console.log(file.raw, 454545, this.Forms);
    },
    // 在这里插入代码片  上传之前
    beforeAvatarUpload(file) {
      //   console.log(file);
      const testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension =
        testmsg === "jpg" || testmsg === "jpeg" || testmsg === "png";
      // console.log(extension);

      if (!extension) {
        this.$message({
          message: "格式不支持!",
          type: "error",
        });
      }
      return extension;
    },
    // 展示图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.bigImgVisible = true;
    },
    //图片的删除方法
    handleRemove(file, fileList) {
      //注意图片删除时，会改变图片的Url格式，但是不影响具体的使用。
      // console.log(fileList, "shanchu");
      this.hideUploadEdit = fileList.length >= 1;
      this.fileImgList = fileList;
    },
    //修改图片
    updaRemove(file, fileList) {
      //注意图片删除时，会改变图片的Url格式，但是不影响具体的使用。
      // console.log(fileList);
      this.fileImgList = fileList;
      this.hideUpload = fileList.length >= 1;
      this.Forms.icon = null;
      // console.log(this.Forms, "shanchu");
    },
    //清空表单
    handleqK() {
      this.QuTerx("ruleForms");
    },
    updaeqK() {
      this.UpdaQuTerx();
    },
    handleClose() {
      this.dialogVisible = false;
    },
    //清空表单
    QuTerx(ruleForms) {
      this.dialogVisible = false;
      this.$refs[ruleForms].resetFields();
      this.hideUploadEdit = this.$refs.upload.fileList.length >= 1;
      this.$refs.upload.clearFiles();
      // console.log(this.$refs.upload.fileList);
    },
    //修改取消
    UpdaQuTerx() {
      this.dialogTableVisible = false;
      // console.log(this.$refs.uploads.fileList.length);
      this.hideUpload = this.$refs.uploads.fileList.length > 1;
      // this.fileList = [];
      // this.fileList.push({ url: this.Forms.icon });
    },
    RoChang(value) {
      // console.log(value,'SDDSADAS');
      StatusSwitch({ id: value.id, status: value.status })
        .then((res) => {
          // console.log(res);
          if (res.data.status == 200) {
            this.$message({
              message: res.data.message,
              type: "success",
            });
          }
        })
        .catch();
    },
    //新增接口
    download() {
      // console.log(this.$refs.ruleForms.valibate);
      this.$refs.ruleForms.validate((valid, object) => {
        // console.log("检验结果valid =>", valid, " ;返回的object=>", object);
        if (valid) {
          // this.$message({
          //     message: "校验通过",
          //     type: "success"
          // });
          const icon = this.ruleForm.icon;
          const component = this.ruleForm.component;
          // console.log(this.ruleForm, 74896886);
          const resourceName = this.ruleForm.resourceName;
          const resourceUrl = this.ruleForm.resourceUrl;
          const status = this.ruleForm.status;
          InseResources({ icon, resourceName, resourceUrl, status, component })
            .then((res) => {
              // console.log(res);
              this.dialogVisible = false;
              if (res.status == 200) {
                this.getData();
                this.$message({
                  message: res.data.message,
                  type: "success",
                });
              }
            })
            .catch();
        } else {
          this.$message({
            message: "校验未通过",
            type: "error",
          });
        }
      });
    },
    inducts() {
      this.dialogVisible = true;
    },
    //查询
    search() {
      this.getData();
    },
    //重置
    reset() {
      this.name = "";
      this.getData();
    },

    //修改
    handleClick(row) {
      this.dialogTableVisible = true;
      // console.log(row.icon, 11111111222222);
      this.Forms.icon = row.icon;
      this.fileList = [];
      this.fileList.push({ url: this.Forms.icon });
      this.hideUpload = this.fileList.length >= 1;
      this.Forms.resourceName = row.resourceName;
      this.Forms.resourceUrl = row.resourceUrl;
      this.Forms.status = row.status;
      this.Forms.id = row.id;
      this.Forms.component = row.component;
      this.Forms.pid = row.pid;
      // console.log( this.Forms ,124865);
      // this.Forms.icon = row.icon;
      // console.log(this.Forms);
      // console.log(this.Forms.icon);
    },
    //确定修改
    update() {
      // console.log(typeof this.Forms.icon, 146356666966996);
      if (typeof this.Forms.icon === "string") {
        delete this.Forms.icon;
      }
      // console.log(this.Forms, 12346489);
      this.$refs.rForms.validate((valid, object) => {
        // console.log("检验结果valid =>", valid, " ;返回的object=>", object);
        if (valid) {
          UpdateResources(this.Forms)
            .then((res) => {
              this.dialogTableVisible = false;
              if (res.status == 200) {
                this.getData();
                this.$message({
                  message: res.data.message,
                  type: "success",
                });
              }
              this.getData();
            })
            .catch();
        } else {
          this.$message({
            message: "校验未通过",
            type: "error",
          });
        }
      });
    },
    //删除
    handleDelete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // console.log(row.id, 122222);
        delresources(row.id)
          .then((res) => {
            // console.log(res);
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getData();
            }
          })
          .catch();
      });
    },
    //size改变
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      // console.log(this.pageSize);
      // this.handleCurrentChange(1);
    },
    //current改变
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.startIndex = (newPage - 1) * this.pageSize;
      const endIndex = this.startIndex + this.pageSize;
      // console.log(this.startIndex);
      // console.log(endIndex);
      let tableDatas = this.tableData;
      this.displayedData = tableDatas
        .slice(this.startIndex, endIndex)
        .map((row, index) => {
          return {
            ...row,
            index: this.startIndex + index + 1,
          };
        });
    },
    //获取资源及查询
    getData() {
      getresources({
        resourceName: this.name,
        pageSize: this.pageSize,
        pageNum: this.currentPage,
      }).then((res) => {
        // console.log(res.data, 1212112);
        this.tableData = res.data.data.inquiryVO;
        // console.log(this.tableData);
        this.totalItems = Number(res.data.data.total);
      });
    },
  },
  computed: {
    displayedDataWithIndex() {
      return this.displayedData;
    },
  },
  watch: {
    currentPage: function (newvalue) {
      this.getData(newvalue);
    },
    pageSize: function (newvalue) {
      this.getData(newvalue);
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style>
.el-pagination {
  margin: 25px 0;
}

.el-upload-list__item {
  transition: none;
}

.hide .el-upload--picture-card {
  display: none;
}

.demo-ruleForm .el-input {
  width: 80%;
}

.customWidth {
  min-width: 500px;
}
</style>
<style lang="scss" scoped>
.title {
  height: 50px;
  line-height: 50px;
  background-color: #f9f9f9;
  border: 1px solid #e9e9e9;
  border-radius: 5px;
  font-size: 17px;
  font-weight: bolder;
  padding: 0 20px;
  margin-bottom: 10px;
}

.zy_cnter {
  padding-top: 10px;
}

.zy {
  display: flex;
  margin:10px 0 0 0;

  .search {
    height: 65px;

    .el-input {
      width: 200px;
    }
  }

  .btn {
    margin-left: 20px;
    width: 200px;
    height: 65px;
  }
}

.export {
  height: 65px;
  line-height: 65px;
}

.QMtb {
  width: 100%;
}

:deep(.el-pager li.active) {
  color: #ffffff;
  background-color: #409eff;
}

:deep(.el-pager li:hover) {
  color: #787d83;
}
</style>
